<template>
    <div class="markdown-body" v-html="compiledMarkdown"></div>
</template>

<script setup>
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it';

const props = defineProps({
    content: {
        type: String,
        default: ''
    }
});

// 创建 markdown-it 实例（带代码高亮配置示例）
const md = new MarkdownIt({
    html: true,         // 允许 HTML 标签
    linkify: true,      // 自动转换链接
    typographer: true,  // 优化排版
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return hljs.highlight(str, { language: lang }).value;
            } catch (__) { }
        }
        return '';
    }
});
// 添加窗口大小监听
import { onMounted, onUnmounted } from 'vue';

const updateMaxWidth = () => {
    const el = document.querySelector('.markdown-body');
    if (el) {
        el.style.maxWidth = `${window.innerWidth - 100}px`;
    }
};

onMounted(() => {
    window.addEventListener('resize', updateMaxWidth);
    updateMaxWidth();
});

onUnmounted(() => {
    window.removeEventListener('resize', updateMaxWidth);
});
// 计算属性实时转换 Markdown
const compiledMarkdown = computed(() => {
    return md.render(props.content);
});
</script>

<style scoped>
/* 引入代码高亮样式 */
@import 'highlight.js/styles/github.css';

/* WebKit 内核浏览器 */
.markdown-body::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera */
}

/* 基础 Markdown 样式 */
.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
    line-height: 1.6;
    overflow-x: auto;
    /* Firefox 64+ */
    scrollbar-width: none;
    /* IE/Edge */
    -ms-overflow-style: none;

    /* padding: 20px; */
    /* 基础换行规则 */
    /* 保留换行符 */
    white-space: pre-wrap;
    /* 长单词换行 */
    word-wrap: break-word;
    /* 更智能的断词 */
    overflow-wrap: anywhere;
    /* 中文强制换行 */
    word-break: break-word;

    /* 表格特殊处理 */
    table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* 代码块换行处理 */
    pre {
        width: 100%;
    }

    code {
        width: 100%;
        white-space: pre-wrap !important;
        /* 覆盖默认 pre 样式 */
        word-break: break-all !important;
    }

    /* 图片自适应 */
    img {
        max-width: 100%;
        height: auto;
    }
}

.markdown-body h1 {
    font-size: 2em;
    border-bottom: 1px solid #eaecef;
}

.markdown-body p {
    /* CSS 2023 新特性，智能换行 */
    text-wrap: pretty;
    /* 英文连字符换行 */
    hyphens: auto;

}

.markdown-body li {
    word-break: break-word;
    margin: 0.5em 0;
}

.markdown-body pre {
    background: #f8f8f8;
    padding: 1em;
    width: 100%;
    border-radius: 4px;
    position: relative;

    /* 添加复制按钮 */
    &:hover::after {
        content: "📋";
        position: absolute;
        right: 10px;
        top: 5px;
        cursor: pointer;
    }
}

.markdown-body code {
    width: 100%;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
    line-height: 1.5;
}

/* 防止 URL 破坏布局 */
.markdown-body a {
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}

/* 数学公式容器 */
.markdown-body .math-container {
    overflow-x: auto;
    padding: 1em 0;
}
</style>